<template>
  <el-container class="container">
    <el-scrollbar>
      <el-menu
        default-active="1"
        class="nav-menu"
        background-color="#303438"
        text-color="#fff"
        active-text-color="#ffd04b"
        @select="selectDocNavMenu"
      >
        <el-menu-item index="1">
          <i class="el-icon-s-promotion" />
          <span slot="title">总纲</span>
        </el-menu-item>

        <el-submenu index="2">

          <template slot="title">
            <i class="el-icon-menu" />
            <span>五大过程租</span>
          </template>

          <el-submenu index="2-1">

            <template slot="title">
              <i class="el-icon-s-opportunity" />
              <span>1. 启动过程组</span>
            </template>

            <el-menu-item
              index="2-1-1"
            ><i class="el-icon-reading" />
              <span slot="title">1.1 制定项目章程</span></el-menu-item>

            <el-menu-item
              index="2-1-2"
            ><i class="el-icon-reading" />
              <span slot="title">1.2 识别相关方</span></el-menu-item>
          </el-submenu>

          <el-submenu index="2-2">
            <template slot="title">
              <i class="el-icon-s-opportunity" />
              <span>2. 规划过程组</span>
            </template>

            <el-menu-item
              index="2-2-1"
            ><i class="el-icon-reading" />
              <span slot="title">2.1 制定项目管理计划</span></el-menu-item>

            <el-menu-item
              index="2-2-2"
            ><i class="el-icon-reading" />
              <span slot="title">2.2 规划范围管理</span></el-menu-item>

            <el-menu-item
              index="2-2-3"
            ><i class="el-icon-reading" />
              <span slot="title">2.3 收集需求</span></el-menu-item>

            <el-menu-item
              index="2-2-4"
            ><i class="el-icon-reading" />
              <span slot="title">2.4 定义范围</span></el-menu-item>

            <el-menu-item
              index="2-2-5"
            ><i class="el-icon-reading" />
              <span slot="title">2.5 创建WBS</span></el-menu-item>

            <el-menu-item
              index="2-2-6"
            ><i class="el-icon-reading" />
              <span slot="title">2.6 规划进度管理</span></el-menu-item>

            <el-menu-item
              index="2-2-7"
            ><i class="el-icon-reading" />
              <span slot="title">2.7 定义活动</span></el-menu-item>

            <el-menu-item
              index="2-2-8"
            ><i class="el-icon-reading" />
              <span slot="title">2.8 排列活动顺序</span></el-menu-item>

            <el-menu-item
              index="2-2-9"
            ><i class="el-icon-reading" />
              <span slot="title">2.9 估算活动持续时间</span></el-menu-item>

            <el-menu-item
              index="2-2-10"
            ><i class="el-icon-reading" />
              <span slot="title">2.10 制定进度计划</span></el-menu-item>

            <el-menu-item
              index="2-2-11"
            ><i class="el-icon-reading" />
              <span slot="title">2.11 规划成本管理</span></el-menu-item>

            <el-menu-item
              index="2-2-12"
            ><i class="el-icon-reading" />
              <span slot="title">2.12 估算成本</span></el-menu-item>

            <el-menu-item
              index="2-2-13"
            ><i class="el-icon-reading" />
              <span slot="title">2.13 制定预算</span></el-menu-item>

            <el-menu-item
              index="2-2-14"
            ><i class="el-icon-reading" />
              <span slot="title">2.14 规划质量管理</span></el-menu-item>

            <el-menu-item
              index="2-2-15"
            ><i class="el-icon-reading" />
              <span slot="title">2.15 规划资源管理</span></el-menu-item>

            <el-menu-item
              index="2-2-16"
            ><i class="el-icon-reading" />
              <span slot="title">2.16 估算活动资源
              </span></el-menu-item>

            <el-menu-item
              index="2-2-17"
            ><i class="el-icon-reading" />
              <span slot="title">2.17 规划沟通管理
              </span></el-menu-item>

            <el-menu-item
              index="2-2-18"
            ><i class="el-icon-reading" />
              <span slot="title">2.18 规划风险管理
              </span></el-menu-item>

            <el-menu-item
              index="2-2-19"
            ><i class="el-icon-reading" />
              <span slot="title">2.19 识别风险
              </span></el-menu-item>

            <el-menu-item
              index="2-2-20"
            ><i class="el-icon-reading" />
              <span slot="title">2.20 实施定性风险分析
              </span></el-menu-item>

            <el-menu-item
              index="2-2-21"
            ><i class="el-icon-reading" />
              <span slot="title">2.21 实施定量风险分析
              </span></el-menu-item>

            <el-menu-item
              index="2-2-22"
            ><i class="el-icon-reading" />
              <span slot="title">2.22 规划风险应对
              </span></el-menu-item>

            <el-menu-item
              index="2-2-23"
            ><i class="el-icon-reading" />
              <span slot="title">2.23 规划采购管理
              </span></el-menu-item>

            <el-menu-item
              index="2-2-24"
            ><i class="el-icon-reading" />
              <span slot="title">2.24 规划相关方参与
              </span></el-menu-item>

          </el-submenu>

          <el-submenu index="2-3">
            <template slot="title">
              <i class="el-icon-s-opportunity" />
              <span>3. 执行过程组</span>
            </template>

            <el-menu-item
              index="2-3-1"
            ><i class="el-icon-reading" />
              <span slot="title">3.1 指导与管理项目工作
              </span></el-menu-item>

            <el-menu-item
              index="2-3-2"
            ><i class="el-icon-reading" />
              <span slot="title">3.2 管理项目知识
              </span></el-menu-item>

            <el-menu-item
              index="2-3-3"
            ><i class="el-icon-reading" />
              <span slot="title">3.3 管理质量
              </span></el-menu-item>

            <el-menu-item
              index="2-3-4"
            ><i class="el-icon-reading" />
              <span slot="title">3.4 获取资源
              </span></el-menu-item>

            <el-menu-item
              index="2-3-5"
            ><i class="el-icon-reading" />
              <span slot="title">3.5 建设团队
              </span></el-menu-item>

            <el-menu-item
              index="2-3-6"
            ><i class="el-icon-reading" />
              <span slot="title">3.6 管理团队
              </span></el-menu-item>

            <el-menu-item
              index="2-3-7"
            ><i class="el-icon-reading" />
              <span slot="title">3.7 管理沟通
              </span></el-menu-item>

            <el-menu-item
              index="2-3-8"
            ><i class="el-icon-reading" />
              <span slot="title">3.8 实施风险应对
              </span></el-menu-item>

            <el-menu-item
              index="2-3-9"
            ><i class="el-icon-reading" />
              <span slot="title">3.9 实施采购
              </span></el-menu-item>

            <el-menu-item
              index="2-3-10"
            ><i class="el-icon-reading" />
              <span slot="title">3.10 管理相关方参与
              </span></el-menu-item>

          </el-submenu>

          <el-submenu index="2-4">
            <template slot="title">
              <i class="el-icon-s-opportunity" />
              <span>4. 监控过程组</span>
            </template>

            <el-menu-item
              index="2-4-1"
            ><i class="el-icon-reading" />
              <span slot="title">4.1 监控项目工作
              </span></el-menu-item>

            <el-menu-item
              index="2-4-2"
            ><i class="el-icon-reading" />
              <span slot="title">4.2 实施整体变更控制
              </span></el-menu-item>

            <el-menu-item
              index="2-4-3"
            ><i class="el-icon-reading" />
              <span slot="title">4.3 确认范围
              </span></el-menu-item>

            <el-menu-item
              index="2-4-4"
            ><i class="el-icon-reading" />
              <span slot="title">4.4 控制范围
              </span></el-menu-item>

            <el-menu-item
              index="2-4-5"
            ><i class="el-icon-reading" />
              <span slot="title">4.5 控制进度
              </span></el-menu-item>

            <el-menu-item
              index="2-4-6"
            ><i class="el-icon-reading" />
              <span slot="title">4.6 控制成本
              </span></el-menu-item>

            <el-menu-item
              index="2-4-7"
            ><i class="el-icon-reading" />
              <span slot="title">4.7 控制质量
              </span></el-menu-item>

            <el-menu-item
              index="2-4-8"
            ><i class="el-icon-reading" />
              <span slot="title">4.8 控制资源
              </span></el-menu-item>

            <el-menu-item
              index="2-4-9"
            ><i class="el-icon-reading" />
              <span slot="title">4.9 监督沟通
              </span></el-menu-item>

            <el-menu-item
              index="2-4-9"
            ><i class="el-icon-reading" />
              <span slot="title">4.10 监督风险
              </span></el-menu-item>

            <el-menu-item
              index="2-4-9"
            ><i class="el-icon-reading" />
              <span slot="title">4.11 控制采购
              </span></el-menu-item>

            <el-menu-item
              index="2-4-9"
            ><i class="el-icon-reading" />
              <span slot="title">4.12 监督相关方参与
              </span></el-menu-item>

          </el-submenu>
          <el-submenu index="2-5">
            <template slot="title">
              <i class="el-icon-s-opportunity" />
              <span>5. 收尾过程组</span>
            </template>

            <el-menu-item
              index="2-5-1"
            ><i class="el-icon-reading" />
              <span slot="title">5.1 结束项目或阶段
              </span></el-menu-item></el-submenu>
        </el-submenu>
      </el-menu></el-scrollbar>

    <router-view />
  </el-container>
</template>

<script>
export default {
  name: 'Document',
  methods: {
    selectDocNavMenu(key, keyPath) {
      console.log(key)
      switch (key) {
        case '1':
          this.$router.push(`/document/outline`)
          break
        default :
          this.$router.push(`/document/detail`)
          break
      }
    }
  }
}
</script>

<style>
.container {
  height: 100%;
  width: 100%;
  position: absolute;
}
.el-scrollbar{
 min-height: 100%;
background-color: #303438;
}

.nav-menu {
  width: auto;
  text-align: left;
  min-width: 220px;
  height: 100%;

}
</style>
